<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>股票买入信号生成</title>
    <style>
        body {
            font-family: sans-serif;
            margin: 0;
            padding: 2em;
            background: #f8f8f8;
            text-align: center;
        }
        .form-container {
            max-width: 600px;
            background: #fff;
            padding: 2em;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin: 2em auto;
        }
        .form-group {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5em;
        }
        .form-group label {
            width: 120px;
            font-weight: bold;
            text-align: right;
            margin-right: 1em;
        }
        .form-group input,
        .form-group select {
            width: 200px;
            height: 34px;
            padding: 8px;
            font-size: 14px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .form-group button {
            padding: 10px 20px;
            background: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
        }
        .form-group button:hover {
            background: #0056b3;
        }
        .ticker-section {
            max-width: 600px;
            background: #fff;
            padding: 1.5em;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin: 2em auto;
        }
        .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: 10px;
            max-width: 500px;
            margin: 0 auto;
        }
        .checkbox-group label {
            display: flex;
            align-items: center;
            font-weight: normal;
            white-space: nowrap;
            padding: 5px 10px;
            background: #f0f0f0;
            border-radius: 4px;
            transition: background 0.2s;
            width: 80px; /* 固定宽度，确保每行5个 */
            box-sizing: border-box;
            justify-content: flex-start;
        }
        .checkbox-group label:hover {
            background: #e0e0e0;
        }
        .checkbox-group input[type="checkbox"] {
            margin-right: 5px;
            width: 16px;
            height: 16px;
            vertical-align: middle;
        }
        .select-all {
            margin-top: 1em;
            text-align: left;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
        }
        .ticker-group {
            margin-bottom: 2em;
        }
        .ticker-group h3 {
            margin: 0 0 0.5em 0;
            color: #333;
            text-align: left;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
        }
        .select-all {
            text-align: left;
            max-width: 500px;
            margin-bottom: 0.5em;
            font-size: 1.17em;
            font-weight: bold;
            color: #333;
        }
        #strategy-description {
            max-width: 600px;
            background: #fff;
            padding: 1.5em;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin: 2em auto;
            text-align: left;
        }
        h1 {
            color: #333;
            margin-bottom: 1.5em;
        }
        @media (max-width: 600px) {
            .form-group {
                flex-direction: column;
                align-items: flex-start;
            }
            .form-group label {
                text-align: left;
                margin-bottom: 0.5em;
            }
            .form-group input,
            .form-group select,
            .form-group button {
                width: 100%;
                height: 34px;
            }
            .checkbox-group {
                flex-direction: column;
                align-items: flex-start;
                max-width: 100%;
            }
            .checkbox-group label {
                width: 100%; /* 移动端每行一个 */
                margin-bottom: 0.5em;
            }
            .ticker-group h3,
            .select-all {
                margin-left: 0;
            }
        }
    </style>
    <script>
        const strategyDescriptions = {{ strategy_descriptions | tojson | safe }};
        window.onload = function() {
            console.log("strategyDescriptions:", strategyDescriptions);
            const strategySelect = document.getElementById("strategy");
            const descriptionDiv = document.getElementById("strategy-description");
            descriptionDiv.innerHTML = strategyDescriptions && strategySelect.value in strategyDescriptions 
                ? strategyDescriptions[strategySelect.value] 
                : "未找到策略描述";

            // 动态绑定全选事件
            const selectAllCheckboxes = document.querySelectorAll('input[id^="select-all-"]');
            selectAllCheckboxes.forEach(checkbox => {
                const groupId = checkbox.id.replace('select-all-', '');
                checkbox.addEventListener('change', () => toggleSelectAll(groupId));
            });
        };
        function updateStrategyDescription() {
            const strategySelect = document.getElementById("strategy");
            const descriptionDiv = document.getElementById("strategy-description");
            descriptionDiv.innerHTML = strategyDescriptions && strategySelect.value in strategyDescriptions 
                ? strategyDescriptions[strategySelect.value] 
                : "未找到策略描述";
        }
        function toggleSelectAll(groupId) {
            const selectAllCheckbox = document.getElementById(`select-all-${groupId}`);
            if (!selectAllCheckbox) {
                console.error(`Error: No checkbox found with id select-all-${groupId}`);
                return;
            }
            const checkboxes = document.querySelectorAll(`#${groupId} input[name="ticker"]`);
            console.log(`Toggling group: ${groupId}, checkboxes found: ${checkboxes.length}`);
            checkboxes.forEach(checkbox => {
                checkbox.checked = selectAllCheckbox.checked;
            });
        }
        function validateForm() {
            const checkboxes = document.querySelectorAll('.checkbox-group input[name="ticker"]:checked');
            if (checkboxes.length === 0) {
                alert("请至少选择一个股票代码！");
                return false;
            }
            const tickersInput = document.getElementById("tickers");
            const selectedTickers = Array.from(checkboxes)
                .map(cb => cb.value)
                .join(",");
            tickersInput.value = selectedTickers;
            console.log("Selected tickers:", selectedTickers);
            return true;
        }
    </script>
</head>
<body>
    <h1>股票买入信号生成</h1>
    <div class="ticker-section">
        <div class="ticker-group">
            <div style="margin-bottom: 10px">
                <input type="checkbox" id="select-all-mid-term-tickers">
                <span class="select-all">中周期股票</span>
            </div>
            <div class="checkbox-group" id="mid-term-tickers">
                {% for ticker in ["AAPL", "AMD", "GOOG", "AVGO", "TSLA", "LI", "NVDA", "PDD", "STM", "TSM", "XPEV", "BABA"] %}
                    <label><input type="checkbox" name="ticker" value="{{ ticker }}"> {{ ticker }}</label>
                {% endfor %}
            </div>
        </div>
        <div class="ticker-group">
            <div style="margin-bottom: 10px">
                <input type="checkbox" id="select-all-short-term-tickers">
                <span class="select-all">短周期股票</span>
            </div>
            <div class="checkbox-group" id="short-term-tickers">
                {% for ticker in ["BBAI", "GSAT", "KC", "NIO", "QUBT"] %}
                    <label><input type="checkbox" name="ticker" value="{{ ticker }}"> {{ ticker }}</label>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="form-container">
        <form method="POST" action="/" onsubmit="return validateForm()">
            <input type="hidden" id="tickers" name="tickers">
            <div class="form-group">
                <label for="start">开始日期:</label>
                <input type="date" id="start" name="start" value="{{ default_start }}" required>
            </div>
            <div class="form-group">
                <label for="end">结束日期:</label>
                <input type="date" id="end" name="end" value="{{ default_end }}" required>
            </div>
            <div class="form-group">
                <label for="strategy">交易策略:</label>
                <select id="strategy" name="strategy" onchange="updateStrategyDescription()">
                    {% for strategy in strategies %}
                        <option value="{{ strategy }}">{{ strategy }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <button type="submit">生成信号</button>
            </div>
        </form>
    </div>
    <div id="strategy-description"></div>
</body>
</html>
